<template>
	<view class="">
		<u-swiper :autoplay="false" :imgMode="scaleToFill" :radius="0" :list="swiperList" indicatorStyle="right: 20px"
			:height="160" @change="e => currentNum = e.current" @click="showImage(currentNum)">
			<view slot="indicator" class="indicator-num">
				<text class="indicator-num__name">{{ tableData.name }}</text>
				<text class="indicator-num__text">{{ currentNum + 1 }}/{{ swiperList.length }}</text>
			</view>
		</u-swiper>
		<view class="positionBox">
			<img alt="" class="positionImg"
				src="https://hzdaoziji.oss-cn-hangzhou.aliyuncs.com/filecc51911f787f45ce9a36b3e584d2dcac.png">
			<view class="positionText">
				{{ tableData.location }}
			</view>
		</view>
		<view class="navigationBox">
			<view class="navigation" @click="navigationClick(tableData)">
				<img alt="" class="navigationImg"
					src="https://travel20231111.oss-cn-hangzhou.aliyuncs.com/image/venueNavigation.png">
				<view class="">
					导航
				</view>
			</view>
			<view class="navigation venuePhone" @click="phoneClick(tableData.venueTel)">
				<img alt="" class="navigationImg"
					src="https://travel20231111.oss-cn-hangzhou.aliyuncs.com/image/venuePhone.png">
				<view class="">
					联系场馆
				</view>
			</view>
		</view>
		<view class="" style="background-color: #007878;">
			<u-tabs :activeStyle="{
			  color: '#fff',
			  fontWeight: 'bold',
			  transform: 'scale(1.05)',
			}" :inactiveStyle="{
			  color: '#fff',
			  transform: 'scale(1)',
			}" :list="tableData.dicts" lineColor="#fff" @click="tabClick"></u-tabs>
		</view>
		<view class="residueBox">
			<view v-for="(item,index) in residueList" :key="index" class="">
				<view class="residueList" @click="residueClick(item)">
					<view class="residueTop">
						{{ item[2] }}/{{ item[0] }}
					</view>
					<view class="residueBootom">
						剩余:{{ item[1] }}
					</view>
				</view>

			</view>
		</view>
		<view class="tipBox">
			<view class="tipTitle">
				订场须知
			</view>
			<view class="tipText">
				{{ tableData.tips }}
			</view>
		</view>
		<view class="introduceBox" @click="introduceClick">
			<view class="">
				场馆介绍
			</view>
			<u-icon name="arrow-right"></u-icon>
		</view>
		<view class="titleBox">
			<view class="title">
				培训课程
			</view>
			<view class="iconBox" @click="moreClick(1)">
				<view class="iconText">
					更多
				</view>
				<u-icon color="#1b6ef3" name="arrow-right"></u-icon>
			</view>
		</view>
		<view v-for="(item,index) in classList" :key="index" class="">
			<view class="classItem" @click="classClick(item.id)">
				<image :src="item.courseCover" class="itemImg" mode=""></image>
				<view class="itemRight">
					<view class="itemName">
						{{ item.courseName }}
					</view>
					<view class="itemPriceRange">
						<view style="color: red;">
							￥
						</view>
						<view class="">
							{{ item.priceRange }}起
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- <view class="titleBox">
      <view class="title">
        热销商品
      </view>
      <view class="iconBox" @click="moreClick(2)">
        <view class="iconText">
          更多
        </view>
        <u-icon name="arrow-right" color="#1b6ef3"></u-icon>
      </view>
    </view>
    <view class="" v-for="(item,index) in commodityList" :key="index">
      <view class="classItem" @click="classClick(item.id)">
        <image :src="item.commodityImg" class="itemImg" mode=""></image>
        <view class="itemRight">
          <view class="itemName">
            {{item.commodityName}}
          </view>
          <view class="itemPriceRange">
            <view style="color: red;">
              ￥
            </view>
            <view class="">
              {{item.priceRange}}起
            </view>
          </view>
        </view>
      </view>
    </view> -->
	</view>

</template>

<script>
	import {
		venueDetail,
		queryCourseList,
		queryCommodityList
	} from "@/api/challenge";

	export default {
		data() {
			return {
				tableData: [],
				classList: [],
				swiperList: [],
				commodityList: [],
				currentNum: 0,
				residueList: [],
				weekData: ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"],
				venueId: ""
			}
		},
		onLoad(data) {
			console.log(data);
			this.venueId = data.id
			venueDetail({
				venueId: data.id
			}).then(res => {
				console.log('输出', res);
				if (res.dicts.length > 0) {
					for (let key in res.dicts[0].countMap) {
						this.residueList.push([key.slice(5), res.dicts[0].countMap[key], this.weekEvent(key), key,
							res
							.dicts[0].name, res.dicts[0].id, res.id
						])
					}
				}
				res.venueMedias.forEach(item => {
					this.swiperList.push(item.img)
				})

				this.tableData = res

			})

			queryCourseList(data.id, 1, 3, {
				status: 0
			}).then(res => {
				console.log('课程', res);
				this.classList = res.records
			})
			queryCommodityList(data.id, 1, 3, {
				status: 0
			}).then(res => {
				this.commodityList = res.records
			})
		},
		methods: {
			navigationClick(data) {

				uni.getLocation({
					type: 'gcj02', //返回可以用于uni.openLocation的经纬度
					success: function(res) {
						const latitude = data.y;
						const longitude = data.x;
						uni.openLocation({
							latitude: latitude,
							longitude: longitude,
							success: function() {
								console.log('success');
							}
						});
					}
				});
			},
			phoneClick(data) {
				uni.makePhoneCall({
					phoneNumber: data
				});
			},
			moreClick(data) {
				if (data == 1) {
					uni.navigateTo({
						url: '/subpackageOne/venueRelated/curriculumList/curriculumList?id=' + this.venueId
					})
				} else {
					uni.navigateTo({
						url: '/subpackageOne/venueRelated/curriculumList/commodityList?id=' + this.tableData.id +
							'&img=' +
							this
							.tableData.venueMedias[0].img + '&name=' + this.tableData.name + '&location=' + this
							.tableData.location
					})
				}

			},
			residueClick(data) {
				console.log(data);
				uni.navigateTo({
					url: '/subpackageOne/venueRelated/venueReservation/venueReservation?venueId=' + data[6] +
						'&dictIdType=' +
						data[5] + '&name=' + data[4] + '&time=' + data[3]
				})
			},
			introduceClick() {
				uni.navigateTo({
					url: '/subpackageOne/venueRelated/introduce/introduce?id=' + this.venueId
				})
			},
			weekEvent(data) {
				var data = new Date(data)
				var weekText = this.weekData[data.getDay()]
				return weekText

			},
			tabClick(item) {
				console.log(item);
				this.residueList = []
				for (let key in this.tableData.dicts[item.index].countMap) {
					this.residueList.push([key.slice(5), this.tableData.dicts[item.index].countMap[key], this.weekEvent(
							key), key, this.tableData
						.dicts[item.index].name, this.tableData.dicts[item.index].id, this.tableData.id
					])
					console.log(this.residueList);
				}
			},
			venueClick() {
				uni.navigateTo({
					url: '/subpackageOne/venueRelated/venueReservation/venueReservation'
				})
			},
			classClick(item) {
				uni.navigateTo({
					url: '/subpackageOne/venueRelated/curriculumDetails/curriculumDetails?id=' + item +
						'&venueId=' + this
						.venueId
				})
			},
			showImage(data) {
				uni.previewImage({
					current: this.swiperList[data],
					urls: [this.swiperList[data]]
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.indicator-num {
		display: flex;
		width: 700rpx;
		align-items: center;
		justify-content: space-between;

		&__name {
			font-size: 40rpx;
			padding: 2rpx 10rpx;
			background-color: rgba(0, 0, 0, 0.35);
			color: #FFFFFF;
		}

		&__text {
			padding: 4rpx 0;
			background-color: rgba(0, 0, 0, 0.35);
			border-radius: 200rpx;
			width: 70rpx;
			@include flex;
			justify-content: center;
			color: #FFFFFF;
			font-size: 24rpx;
		}
	}

	.positionBox {
		display: flex;
		padding: 20rpx;
		align-items: center;

		.positionImg {
			width: 40rpx;
			height: 40rpx;
		}

		.positionText {
			margin-left: 6rpx;
		}
	}

	.navigationBox {
		display: flex;
		border-top: 2rpx solid #cdcdcd;


		.navigation {
			width: 50%;
			display: flex;
			justify-content: center;
			align-items: center;
			padding: 16rpx 0;

			.navigationImg {
				width: 40rpx;
				height: 40rpx;
				margin-right: 10rpx;
			}
		}

		.venuePhone {
			border-left: 2rpx solid #cdcdcd;
		}
	}

	.residueBox {
		display: flex;
		overflow: auto hidden;

		.residueList {
			width: 260rpx;
			text-align: center;
			border-radius: 10rpx;
			margin: 20rpx;
			box-shadow: 0pt 1px 6px -1px rgba(0, 0, 0, 0.24);

			.residueTop {
				background: #009999;
				border-radius: 10rpx 10rpx 0 0;
				padding: 10rpx 0;
				color: #fff;
			}

			.residueBootom {
				// background-color: #81d3f8;
				border-radius: 0 0 10rpx 10rpx;
				padding: 10rpx 0;
			}
		}
	}

	.tipBox {
		margin: 20rpx;
		padding: 20rpx;
		box-shadow: 0pt 1px 6px -1px rgba(0, 0, 0, 0.24);

		.tipTitle {
			font-size: 40rpx;
			font-weight: 600;
		}
	}

	.introduceBox {
		margin: 20rpx;
		padding: 20rpx;
		display: flex;
		justify-content: space-between;
		box-shadow: 0pt 1px 6px -1px rgba(0, 0, 0, 0.24);
	}

	.curriculumBox {
		font-size: 40rpx;
		font-weight: 600;
		text-align: center;
	}

	.classItem {
		display: flex;
		padding: 20rpx;

		.itemImg {
			width: 160rpx;
			height: 160rpx;
		}

		.itemRight {
			margin-left: 20rpx;

			.itemName {
				font-weight: 700;
			}

			.itemPriceRange {
				display: flex;
				margin-top: 50rpx;
			}
		}
	}

	.titleBox {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 15px 0 10px 0;

		.title {
			width: 60%;
			text-align: right;
			font-size: 40rpx;
			font-weight: 600;
		}

		.iconBox {
			display: flex;
			align-items: baseline;

			.iconText {
				color: #1b6ef3;
			}
		}
	}
</style>